import React, { useState , useEffect} from 'react';
import { message, Table, } from 'antd';
import XLSX from 'xlsx';

const D = ({ Props }) => {
  const [tabledata, setTabledata] = useState(null)
  const [columns, setcolumns] = useState([])
  const [filename, setFilename] = useState('')
  // 数据转换函数  
  function convertToJsonObjects(data) {
    // 假设第一个数组是列标题  
    const headers = data.shift(); // 移除并返回第一个元素（列标题）  
    return data.map(row => {
      // 创建一个对象，并使用headers作为键，row数组的值作为对应的值  
      const obj = {};
      headers.forEach((header, index) => {
        obj[header] = row[index];
      });
      return obj;
    });
  }

  // OnChange上传预览
  const UpOnChange = (info) => {
    if (info.file.status === 'uploading') {
      // console.log('---')
      // setUploading(true);
      // 使用 info.percent 追踪上传进度  
      // setUploadPercent(info.percent);
    }
    if (info.file.status === 'done') {
      // setLoading(true);
      // setExceldata(info.file.originFileObj)
      setFilename(info.file.name)
      // setUploading(false);
      // 文件上传完成后的处理逻辑  
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 假设我们只处理第一个工作表  
        const worksheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[worksheetName];

        // 将工作表转换为 JSON 对象数组  
        const rawJsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 假设第一行是标题行  
        // 过滤掉空行  
        const jsonData = rawJsonData.filter(row => {
          // 假设你想要去除那些所有字段都为空、空字符串、null 或 undefined 的行  
          return Object.values(row).some(value => {
            // 检查值是否不是空字符串、null、undefined 等  
            return value !== '' && value !== null && value !== undefined;
          });
        });
        const Jsontable = convertToJsonObjects(jsonData)
        // console.log('--------', Jsontable)
        // 进行数据校验（这里只是示例，你需要根据实际情况进行校验）  
        // ...  
        let col = [
          { title: '序号', dataIndex: 'index', render: (text, record, index) => <span>{index + 1}</span>,fixed: 'left',width:66 },
        ]
        if (Jsontable[0]) {
          Object.keys(Jsontable[0]).forEach(key => {
            // console.log(key, ':', Jsontable[0][key]);  
            col.push({
              title: key,
              dataIndex: key,
              ellipsis: true
            })
          });
        }
        setcolumns(col)
        // 假设校验无误，将数据设置为预览数据  
        setTabledata(Jsontable)
        // setLoading(false);
        message.success('EXCEL文件解析成功,预览 EXCEL - JSON')
      };
      reader.readAsArrayBuffer(info.file.originFileObj);
    } else if (info.file.status === 'error') {
      // setUploading(false);
      message.error("文件上传失败")
      // 上传出错的处理逻辑  
    }
  }
  // 组件初始化 时候运行
  useEffect(() => {
    console.log('ExcelViews')
    if (Props && Object.keys(Props).length > 0) {
        UpOnChange(Props);
    } else {
      setTabledata(null)
      setcolumns([])
      setFilename('')

    }
}, [Props]);
  return (
        <div>
          <h3 >上传的数据预览：  <span style={{ color: 'red' }}>{filename}</span></h3>
          <Table 
          dataSource={tabledata} 
          columns={columns}
          pagination={{ pageSize: 50 }}
          bordered
          size="middle"
          scroll={{ x: 'calc(700px + 50%)', y: 300 }}
          />
          <h4>数据数量: <span style={{color:"red"}}>{tabledata === null ? 0 : tabledata.length} </span>条</h4>
        </div>
  );
};
export default D;